<template>
	<view class="user">
		<userBar :title="title" :icon="msgUrl"></userBar>
		<view v-if="need_login_show">
			<m-login></m-login>
		</view>
		<view v-else>
			<view class="user-box">
<!--				<view class="ticket_img_box"><image class="ticket" :src="img_url+'static/img/ticket_in.png'"/></view>-->
<!--				<view class="ticket_text">入场券剩余工作时间：{{userInfo.group_buy_access_time}}个工作日</view>-->
				<view class="u-msg">
					<image @tap="handleChoseImg" class="m-head" :src="userInfo.avatar"></image>
					<view class="msg">
						<view class="msg-nick" @tap="clickName">{{userInfo.display_name}}</view>
						<view class="msg-phone">{{userInfo.user_phone}}</view>
						<view class="msg-type"><text class="type">{{userInfo.is_effective_user_name}}</text><image class="logo_img" :src="img_root+'v'+userInfo.member_id+'.png'"/></view>
					</view>
					<view class="operation">
						<view class="o-btn" @tap="handleSwitch()"><image class="qiehuan_img"  src="../../static/img/qiehuan.png"/></view>
						<view @tap="goToQrCode()"><image  :src="tiaoxingCode"></image></view>

					</view>

				</view>
				<view class="u-money">

					<view class="group_money_box">
						<view class="group_2_box">
							<view class="box_width">
								<view class="group_text">账户余额</view>
								<view class="group_text_money">￥{{userInfo.price}}</view>
							</view>
							<view class="group_button_box">
								<button class="group_button_1"  @tap="goToGetCash()">提&nbsp现</button>
							</view>
						</view>
						<view class="group_3_box">
							<view class="box_width_1">
								<view class="group_text">仓储券</view>
								<view class="group_text_money">￥{{userInfo.storage_ticket}}</view>
							</view>
							<view class="group_button_box">
								<button class="group_button_2" @tap="goWareHouseTicketLog()">查看</button>
							</view>
						</view>
					</view>
					<view class="group_money_box">
						<view class="group_1_box">
							<view class="box_width">
								<view class="group_text">购货券</view>
								<view class="group_text_money">￥{{userInfo.group_wallet_money}}</view>
							</view>
							<view class="group_button_box">
								<button class="group_button_3" @tap="goGroupBuyLog()">查看</button>
							</view>
						</view>
						<view class="group_1_box">
							<view class="box_width_1">
								<view class="group_text">待领取红包</view>
								<view class="group_text_money">￥{{userInfo.need_wallet_money}}</view>
							</view>
							<view class="group_button_box">
								<button class="group_button_4" @tap="goWallet">领取</button>
							</view>

						</view>
					</view>
<!--					<view class="m-title" @tap="">-->
<!--						<view><image class="cash_img" src="../../static/img/cashAccount.png" /></view>-->

<!--						<view class="cash_text">现金账户</view>-->

<!--						<view class="get_cahs_box" @tap="goWallet">-->
<!--							<view class="get_cash_img_box">-->
<!--								<image class="get_cash_img"  src="../../static/img/get_cash.png" />-->
<!--							</view>-->
<!--							<view class="get_cash_money">-->
<!--								￥{{userInfo.need_wallet_money}}-->
<!--							</view>-->
<!--						</view>-->

<!--						<view class="b-btn">-->
<!--&lt;!&ndash;							<view class="tixiam_img_box"><image class="tixian_img" src="../../static/img/tixian.png" /></view>&ndash;&gt;-->
<!--&lt;!&ndash;							<view class="tixian_text1" @tap="goToGetCharge()">充值</view>&ndash;&gt;-->
<!--							<view class="tixian_text" @tap="goToGetCash()">提现</view>-->
<!--						</view>-->
<!--					</view>-->
<!--					<view class="m-box">-->
<!--						<view class="b-money">￥{{userInfo.price}}</view>-->
<!--					</view>-->
					<view class="title-box">
						<view class="b-left">我的服务</view>
						<view class="kefu_box">
							<view><image class="kefu_img" :src="img_url+'static/img/kefu.png'"/></view>
							<view><button open-type="contact" class="contact">在线客服</button></view>
						</view>

					</view>
				</view>
				<view class="u-service">

					<view class="content-box">
						<view class="box-item" v-for="(item,index) in serviceList" :key="index" @tap="goToNext(item.route)">
							<image :src="item.img_url"></image>
							<view class="i-title">{{item.title}}</view>
						</view>
					</view>
				</view>
				<!--			<view style="width: 100%;height: 10px;background-color:#F7F7F7;"></view>-->

				<van-dialog
						use-slot
						title="修改昵称"
						:show="show"
						show-cancel-button
						@close="nameClose"
						@confirm="nameConfirm"
				>
					<view>
						<input class="nickname" placeholder="请输入新的昵称" type="text"  v-model="nick_name" />
					</view>
				</van-dialog>


				<view class="u-operation">
					<button class="u-o-btn item" open-type="share">
						<view class="i-title">邀请好友</view>
						<image :src="jiantou_img"></image>
					</button>
					<view class="item" @tap="handleGoBankCardList()">
						<view class="i-title" >银行卡管理</view>
						<image :src="jiantou_img"></image>
					</view>
<!--					<view class="item" @tap="handleGoCertify()">-->
<!--						<view class="i-title" >实名认证</view>-->
<!--						<image :src="jiantou_img"></image>-->
<!--					</view>-->
					<view class="item" @tap="handleGoSafe()">
						<view class="i-title">安全中心</view>
						<image :src="jiantou_img"></image>
					</view>
					<view class="item" @tap="handleGoAddress()">
						<view class="i-title" >地址管理</view>
						<image :src="jiantou_img"></image>
					</view>

				</view>
			</view>
			<view  @tap="logOut()"><button class="loginOut">退出登录</button></view>
		</view>


	</view>
</template>

<script>
	import MLogin from '@/components/m-login.vue'
	export default {
		name: 'user',
		data() {
			return {
				need_login_show:true,
				userInfo: {
					head_url: "",
					avatar:"",
					name: "",
					phone: "",
					type: "",
					level: "",
					invite:'',
					need_wallet_money:"0.00"
				},
				tempFilePath: '',
				tiaoxingCode: this.$mConfig.assetsPath+"static/img/tiaoxing.png",
				serviceList: [{
						title: "我的钱包",
						img_url: "../../static/img/u-business.png",
					    route:'myWallet'
					},
					{
						title: "我的商品",
						img_url: "../../static/img/u-shop.png",
						route:'myGoods'
					},
					{
						title: "实名认证",
						img_url: "../../static/img/u-xieyi.png",
						route:'certification'
					},
					{
						title: "我的好友",
						img_url: "../../static/img/u-friend.png",
						route:'myFriends'
					}
				],
				img_root:'../../static/img/',
				jiantou_img:this.$mConfig.assetsPath+"static/img/jiantou.png",
				img_url:this.$mConfig.assetsPath,
				show:false,
				nick_name:'',
				title: '我的',
				msgUrl: this.$mConfig.assetsPath+"static/img/msg.png",
			}

		},
		onShareAppMessage() {
			return{
				title:"渤海P2C",
				path:"/pages/login/register?invite_code="+this.userInfo.invite_code,
				imageUrl:"../../static/img/share.jpg"
			}
		},
		async onShow(){ // 页面每次显示都触发
			if(this.$store.state.token!==''){ // 处理是否需要登录显示
				this.need_login_show=false
			}else{
				this.need_login_show=true
				return
			}
			let user_data = await this.$apis.getUserInfo({access_token:''})
			if(user_data.code===0){
				this.$store.commit("SET_USERINFO",user_data.data)
				this.userInfo=user_data.data
			}
		},
		mounted(){

		},
		methods: {
			goWallet(){
				this.$router.push({
					route:this.$routesConfig.walletLog,
				})
			},
			handleSwitch() {
				uni.navigateTo({
					url: '../login/switchAccount'
				})
			},
			handleGoSafe() {
				uni.navigateTo({
					url: "../user/safeCenter"
				})
			},
			handleGoAddress() {
				uni.navigateTo({
					url: "../user/addressList"
				})
			},
			handleGoBankCardList() {
				uni.navigateTo({
					url: "../user/bankCardList"
				})
			},
			handleGoCertify() {
				uni.navigateTo({
					url: "../user/certification"
				})
			},
			logOut(){
				// uni.clearStorageSync();
				this.$store.commit("SETTOKEN", '');
				this.$store.commit("SET_USERINFO", '');
				uni.reLaunch({
					url: '/pages/main/home'
				})
			},
			goToGetCash(){
				uni.navigateTo({
					url: "../user/getCash"
				})
			},
			goWareHouseTicketLog(){
				uni.navigateTo({
					url: "../user/wareHouseTicketLog"
				})
			},
			goGroupBuyLog(){
				uni.navigateTo({
					url: "../user/groupWalletLog"
				})
			},
			goToGetCharge(){
				uni.navigateTo({
					url: "../user/getCharge"
				})
			},
			goToNext(routes){
				uni.navigateTo({
					url: "../user/"+routes
				})
			},
			async goToQrCode(){
				let user_data = await this.$apis.getUserInfo({access_token:''})
				if(user_data.code===0){
					this.$store.commit("SET_USERINFO",user_data.data)
					this.userInfo=user_data.data
				}
				let invite=''
				if(this.userInfo.invite_code){
					invite=this.userInfo.invite_code
				}else {
					invite=''
				}
				uni.showLoading({})
				this.$router.push({
					route:this.$routesConfig.qrCode,
					query:{
						inviteId:invite
					}
				})
			},
			//修改头像
			handleChoseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						console.log(res)
						this.tempFilePath = res.tempFilePaths[0]
						this.handleSave()
					}
				})
			},
			//保存头像
			async handleSave() {
				let configHeader = {
					"Content-Type": "application/x-www-form-urlencoded",
					"X-requested-With": "XMLHttpRequest",
					"access_token": uni.getStorageSync("token"),
					"Cookie": "PHPSESSID=" + uni.getStorageSync('sessionId')
				}
				uni.showToast({
					icon:"loading",
					title:'保存中',
					duration:2000
				})
				if(this.tempFilePath){
					uni.uploadFile({
						url: this.$apis.updataHeadUrl,
						filePath: this.tempFilePath,
						name: 'file',
						header: configHeader,
						formData: {},
						timeout:3000,
						success: async (res) => {
							let res_data=JSON.parse(res.data)
							let data=await this.$apis.updateUserInfo({avatar:res_data.data.upload_src})
							if(data.code===0){
								this.userInfo.avatar = res_data.data.src
								uni.showToast({
									icon:"loading",
									title:'操作成功',
									duration:2000
								})
							}


						},
						fail:(res)=>{
							console.log(res)
						}
					})
				}else{
					let user_data = await this.$apis.getUserInfo({access_token:''})
					if(user_data.code===0){
						this.$store.commit("SET_USERINFO",user_data.data)
						this.userInfo=user_data.data
					}


				}

			},
			nameClose(){
				this.show=false

			},
			async nameConfirm(){
				if(this.nick_name===this.userInfo.name){
					return
				}else if(this.nick_name===''){
					uni.showToast({
						icon:"none",
						title:'请输入新的昵称',
						duration:2000
					})
				}else{
					let res=await this.$apis.updateUserInfo({'nickname':this.nick_name})
					if(res.code===0){
						let user_data = await this.$apis.getUserInfo({access_token:''})
						this.$store.commit("SET_USERINFO",user_data.data)
						this.userInfo=user_data.data
					}
				}


			},
			clickName(){
				this.show=!this.show
			}

		},
		components: {
			MLogin
		}
	}
</script>
<style>
	page {
		background-color:#FAFAFA
	}
</style>
<style scoped lang="less">
	.user {
		width: 100%;
		.user-box {
			margin-top: 100rpx;
			.u-msg {
				margin-left: 50rpx;
				width: 650rpx;
				height: 315rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 10rpx;
				border-bottom: solid 1px #F7F7F7;
				background-color: #FF9502;
				border-radius: 10px;

				.m-head {
					width: 120rpx;
					height: 120rpx;
					display: block;
					flex-shrink: 0;
					border-radius: 60rpx;
					margin-top: -143rpx;
				}

				.msg {
					flex-grow: 1;
					padding-left: 20rpx;
					margin-top: -143rpx;
					color: #FFFFFF;

					.msg-nick {
						margin-top: 20rpx;
						font-size: 28rpx;
						/*color: gray;*/
						line-height: 50rpx;
					}

					.msg-phone {
						font-size: 24rpx;
						/*color: gray;*/
						line-height: 50rpx;
					}

					.msg-type {
						font-size: 24rpx;
						/*color: gray;*/
						line-height: 50rpx;

						.type {
							padding-right: 10rpx;
						}

						.level {
							font-size: 30rpx;
							background-color: green;
							color: #ffffff;
							padding: 0 5rpx 0 8rpx;
							box-sizing: border-box;
							border-radius: 8rpx;
						}
					}
				}

				.operation {
					align-self: stretch;
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;

					.o-btn {
						padding: 8rpx;
						/*background-color: orange;*/
						font-size: 26rpx;
						color: #ffffff;
						border-radius: 5rpx;
					}

					image {
						width: 280rpx;
						height: 80rpx;
						display: block;
					}
				}
			}

			.u-money {
				margin-top: 25rpx;
				padding: 0rpx 40rpx 30rpx 40rpx;
				background-color: #FAFAFA;
				/*border-bottom: solid 1px #F7F7F7;*/

				.m-title {
					display: flex;
					flex-direction: row;
					background-color: #ffffff;
					font-size: 26rpx;
					color: gray;
					line-height: 60rpx;
					border-top-right-radius: 5px;
					border-top-left-radius: 5px;
				}

				.m-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #ffffff;

					.b-money {
						font-size: 37rpx;
						color: #0E0E0E;
						position: relative;
						top: -20rpx;
					}

				}
			}

			.u-service {
				background-color: #FAFAFA;
				padding: 0 20rpx 20rpx 20rpx;



				.content-box {
					display: flex;
					justify-content: space-between;
					/*padding-top: 30rpx;*/

					.box-item {
						text-align: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.i-title {
							font-size: 26rpx;
							color: #444444;
							padding-top: 10rpx;
						}
					}
				}
			}

			.u-operation {
				background-color: #ffffff;
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;

				.u-o-btn {
					display: block;
					background-color: #ffffff;
					padding: 0;
				}

				.u-o-btn::after {
					content: "";
					border: none;
				}

				.item {
					display: flex;
					justify-content: space-between;
					width: 100%;
					box-sizing: border-box;
					height: 80rpx;
					align-items: center;
					border-bottom: solid 1px #F7F7F7;

					image {
						width: 30rpx;
						height: 30rpx;
						display: block;
					}

					.i-title {
						font-size: 26rpx;
						color: #444444;;
					}
				}

			}
		}
	}
	.kefu_box{
		display: flex;
		flex-direction: row;
	}
	.kefu_img{
		width: 32rpx;
		height: 32rpx;
		transform: translate(0,50%);
	}
	.contact{
		text-align: center;
		font-size: 24rpx;
		color: #FF9502;
		background-color:#FFFFFF ;
		padding: 0 !important;
		padding-top: 5rpx !important;
	}
	.contact::after{
		border: none !important;
	}
	.title-box {
		background-color: #ffffff;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: solid 0.5px #EEEEEE;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		.b-left {
			font-size: 24rpx;
			color: #333333;
		}
		position: relative;

		.b-right {
			font-size: 28rpx;
			color: pink;
		}
	}
	.cash_img{
		width: 30rpx;
		height: 30rpx;
		transform: translate(0,20%);
	}
	.get_cash_img{
		width: 150rpx;
		height: 150rpx;
		transform: translate(30%,20%);
	}
	.cash_text{
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #8E8E8E;
	}
	.tixian_img{
		width: 40rpx;
		height: 40rpx;
		transform: translate(0,20%);
	}
	.tixian_text{
		color: #FF9502;
		font-size: 24rpx;
		/*margin-top: 68rpx;*/
		/*margin-left: 90rpx;*/
		/*position: relative;*/
		position: relative;
		top:70rpx;
		right: -85rpx;
	}
	.tixian_text1{
		color: #FF9502;
		font-size: 24rpx;
		margin-top: 0rpx;
	}
	.tixiam_img_box{
		width: 50rpx;
		height: 50rpx;
	}
	.b-btn {
		/*margin-top: 10rpx;*/
		/*margin-right: 20rpx;*/
		/*position: relative;*/
		/*right: -120rpx;*/
		/*top: 22rpx;*/
		/*position: fixed;*/
		/*transform: translate(1250%,22%);*/
	}
	.logo_img{
		width: 48rpx;
		height: 30rpx;
		transform: translate(0,20%);
	}
	.qiehuan_img{
		width: 30rpx !important;
		height: 30rpx !important;
	}
	.loginOut{
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #FF9502;
		width: 340rpx !important;
		height: 60rpx !important;
		line-height: 2.5;
		margin-top: 20rpx;
	}
	.loginOut::after{
		border:  none!important;
	}
	.ticket{
		width: 30rpx !important;
		height: 30rpx !important;
	}
	.ticket_text{
		font-size: 22rpx;
		color: #ffffff;
		position: relative;
		top: 300rpx;
		left: 58rpx;
		width: 80%;
	}
	.ticket_img_box{
		position: relative;
		top: 293rpx;
		left: 74rpx;
		width: 70%;
	}
	.nickname{
		text-align: center;
		margin-top: 30rpx;

	}
	.gat_cash_text{
		/*position: fixed;*/
		/*transform: translate(135%,60%);*/
		/*margin-left: 20rpx;*/
		/*margin-top: 10rpx;*/
		color: #EA4833;
		font-size: 36rpx;
	}
	.get_cash_money{
		margin-top: 70rpx;
		margin-left: 25rpx;
		color: #EA4833;
		font-size: 36rpx;
	}
	.get_cahs_box{
		width: 57%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.group_money_box{
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		padding-left: 10rpx;
		padding-right: 60rpx;
		padding-bottom: 10rpx;
	}
	.group_1_box{
		display: flex;
		justify-content: space-around;
		text-align: center;
		/*width: 30%;*/
	}
	.group_2_box{
		display: flex;
		justify-content: space-around;
		text-align: center;
		/*width: 30%;*/
	}
	.group_3_box{
		display: flex;
		justify-content: space-around;
		text-align: center;
		/*width: 30%;*/
	}
	.group_text{
		font-size: 24rpx;
		color: #FF9502;
		margin-top: 20rpx;
	}
	.group_text_money{
		font-size: 32rpx;
		color: #FF9502;
		margin-top: 20rpx;
	}
	.group_button_box{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.group_button_1{
		width: 110rpx;
		height: 45rpx;
		background-color: #FF9502;
		font-size: 23rpx;
		color:#ffffff;
		line-height: 2.0;
		margin-top: 10rpx;
		margin-left: -15rpx;
	}
	.group_button_2{
		width: 110rpx;
		height: 45rpx;
		background-color: #FF9502;
		font-size: 23rpx;
		color:#ffffff;
		line-height: 2.0;
		margin-top: 10rpx;
		margin-left: -32rpx;
	}
	.group_button_3{
		width: 110rpx;
		height: 45rpx;
		background-color: #FF9502;
		font-size: 23rpx;
		color:#ffffff;
		line-height: 2.0;
		margin-top: 10rpx;
		margin-left: -15rpx;
	}
	.group_button_4{
		width: 110rpx;
		height: 45rpx;
		background-color: #FF9502;
		font-size: 23rpx;
		color:#ffffff;
		line-height: 2.0;
		margin-top: 10rpx;
		margin-left: -32rpx;
	}
	.group_button_1::after{
		border:1px solid transparent;
	}
	.group_button_2::after{
		border:1px solid transparent;
	}
	.group_button_3::after{
		border:1px solid transparent;
	}
	.group_button_4::after{
		border:1px solid transparent;
	}
	.box_width{
		width: 200rpx;
		text-align:left;
		padding-left: 15rpx;
	}
	.box_width_1{
		width: 200rpx;
		text-align:left;
		padding-left: 50rpx;
	}

</style>
